<template>
  <div class="wallet">
    <van-nav-bar color="#fff" :border="false">
      <p slot="title" class="title">我的钱包</p>
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        slot="left"
        width="20"
        height="20"
        @click="leftClick"
      />
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="wallet-main">
        <div>
          <p class="main-title">当前可提现余额（元）</p>
          <p class="money">{{ account.balance }}</p>
          <p class="jiesuan" @click="settlement">我要结算</p>
        </div>
      </div>
      <div class="wallet-footer">
        <p class="leiji">{{ incomeInfo.allRebate }}</p>
        <p class="leitext">共累计收款（元）</p>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import {
  queryAccountInfoApi,
  queryIncomeInfoApi,
  queryNewsInfoApi,
} from "network/ApiServe";

export default {
  data() {
    return {
      title: "功能跳转",
      page: 0,
      incomeInfo: {},
      account: {},
      content: "",
      isLoading: false,
    };
  },
  created() {
    this.userId = localStorage.getItem("userId");
    this.token = localStorage.getItem("token");
    this.brandId = localStorage.getItem("brandId");
  },
  mounted() {
    this.getAccount();

    this.getIncomeInfo();
    this.getNewsInfo();
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.getAccount();

        this.getIncomeInfo();
        this.getNewsInfo();
      }, 1000);
    },
    leftClick() {
      this.$router.back(-1);
    },
    settlement() {
      console.log(this.content);
      if (this.content != "") {
        this.getSrc("余额提现", this.content);
      } else {
        this.$toast("请联系管理人员！");
        return;
      }
    },
    //查询账户信息接口
    getAccount() {
      queryAccountInfoApi(this.token)
        .then((res) => {
          if (res.resp_code == "000000") {
            this.account = res.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查询总收益接口
    getIncomeInfo() {
      queryIncomeInfoApi(this.userId)
        .then((res) => {
          if (res.resp_code == "000000") {
            this.incomeInfo = res.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //
    getNewsInfo() {
      queryNewsInfoApi(this.brandId, this.title, this.page)
        .then((res) => {
          if (res.resp_code === "000000") {
            if (res.result.content != null) {
              res.result.content.filter((item) => {
                if (item.title === "余额提现") {
                  return (this.content = item.content);
                }
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSrc(titles, urls) {
      // console.log("titles", titles);
      // console.log("urls", urls);
      this.$router.push({
        name: "OpenWeb",
        params: {
          title: titles,
          url: urls,
        },
      });
    },
  },
};
</script>
<style scoped>
.van-nav-bar {
  background-color: #000;
  color: #fff;
}
.title {
  color: #fff;
}
.wallet-main {
  background: #000;
  height: 440px;
}
.main-title {
  font-size: 14px;
  text-align: center;
  padding-top: 30px;
  color: #fff;
}
.money {
  font-size: 32px;
  color: #fff;
  text-align: center;
  margin-top: 20px;
}
.jiesuan {
  font-size: 18px;
  padding: 5px 20px 8px;
  background-color: #fff;
  color: #000;
  border-radius: 15px;
  width: 120px;
  text-align: center;
  margin: 193px auto 50px;
}
.leiji {
  text-align: center;
  margin-top: 40px;
  color: #000;
  font-size: 28px;
}
.leitext {
  font-size: 14px;
  color: #444;
  margin-top: 10px;
  text-align: center;
}
</style>